iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

關於 UI 元件你所該知道的事系列 第 26

Day 26 - 實戰演練 — Notifier 、Notification

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20211011/20120754pAx7xMVG5c.png

想先看 Code 或是 Demo 的由此去

Github Repo: ithelp-ui-demo/Notifier

Live Demo:** Notification**

Notifier

要做 Notification 前要先做 Notifier,把做一個新的 Root 的行為抽象化出來。

Typings

https://ithelp.ithome.com.tw/upload/images/20211011/2012075427ppSESU4H.png

CreateNotifier

https://ithelp.ithome.com.tw/upload/images/20211011/20120754k4Dl64KeGZ.png

NotifierManager

https://ithelp.ithome.com.tw/upload/images/20211011/20120754FgIBC8xRT6.png

Notification

這邊一樣是只有把 HTML 結構跟 JS、React 的邏輯實作出來,Tailwind CSS 的部分會等之後的實作都趕完後候補上的!

Interface / API

https://ithelp.ithome.com.tw/upload/images/20211011/20120754PRcjrUSis1.png

元件實作

https://ithelp.ithome.com.tw/upload/images/20211011/201207540h1cz8PJgL.png

Usage

<Button
  variant="contained"
  onClick={() => {
    Notification.add({
      title: 'Demo Title',
      children: 'Demo String',
    });
  }}
>
  add
</Button>

上一篇
Day 25 - 實戰演練 — Input
下一篇
Day 27 - 實戰演練 — Tabs
系列文
關於 UI 元件你所該知道的事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言